<template>
  <v-layout>
    <template #header>
      <el-date-picker
        v-model="tableQuery.timeRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="getDiviverList"
      />
    </template>
    <v-table
      url="/divideOrder/getDivideOrderList"
      ref="tableRef"
      :query="tableQuery"
    >
      <v-column auto prop="scName" label="学校名称"></v-column>
      <v-column auto prop="code" label="分单编号"></v-column>
      <v-column auto label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="toOp(row)">详情</el-button>
        </template>
      </v-column>
    </v-table>
    <v-dialog
      v-model="detailVisible"
      title="详情"
      width="1000px"
      @printbtn="printlist"
      :showExport="showExport"
      confirmText="导出"
      @confirm="exportbtn"
      :printhide="printhide"
    >
      <el-table :data="detailList" style="width: 100%" height="550">
        <el-table-column prop="name" label="商品名称" width="150" />
        <el-table-column prop="format" label="规格" width="150" />
        <el-table-column prop="cunit" label="单位" width="120" />
        <el-table-column prop="price" label="价格" width="150" />
        <el-table-column prop="num" label="数量" width="150" />
        <el-table-column prop="vendorid" label="供应商" width="120" />
      </el-table>
      <div id="printDiv" v-show="printhide">
        <table style="margin-top: 0.5rem">
          <tbody>
            <tr v-for="(item, index) in arrdata" :key="index">
              <td
                style="
                  width: 5%;
                  text-align: center;
                  border-bottom: 1px solid gray;
                  border-right: 1px solid gray;
                "
                :colspan="it.colspan"
                v-for="(it, index) in item.numberdata"
                :key="index"
              >
                {{ it.tape }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </v-dialog>
  </v-layout>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { queryDivideOrderList, printinformation } from "@/api/user";
import type { divideDetailData } from "@/api/user/model";
import { markRaw, pushScopeId, reactive, ref } from "vue";
import { exportExcelMethod } from "@/utils/excel";
import { forEach, keyBy } from "lodash-es";
const { tableRef, getSelectionRows, reload } = useTable();

interface Data {
  id: string;
  scName: string;
  shopId: string;
  code: string;
  status: string;
  fdUser: string;
  createTime: string;
}
let arrdata = ref([
  {
    name: "标题",
    numberdata: [
      { tape: "食材类型：", colspan: "1" },
      { tape: "" },
      { tape: "打印时间：" },
      { tape: "", colspan: "2" },
      { tape: "收获时间" },
      { tape: "" },
    ],
  },
  {
    name: "头部",
    numberdata: [
      { tape: "序号", colspan: "1" },
      { tape: "食品食材" },
      { tape: "规格型号" },
      { tape: "数量" },
      { tape: "单价" },
      { tape: "金额" },
      { tape: "备注" },
    ],
  },
  {
    name: "1",
    numberdata: [
      { tape: "1" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "2",
    numberdata: [
      { tape: "2" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "3",
    numberdata: [
      { tape: "3" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "4",
    numberdata: [
      { tape: "4" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "5",
    numberdata: [
      { tape: "5" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "6",
    numberdata: [
      { tape: "6" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "7",
    numberdata: [
      { tape: "7" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
      { tape: "" },
    ],
  },
  {
    name: "总计",
    numberdata: [
      { tape: "本⻚⼩计:￥240.5元（⼤写:贰佰肆拾元伍⻆", colspan: "4" },
      { tape: "总计:￥267.5元（⼤写:贰佰陆拾柒元伍⻆", colspan: "3" },
    ],
  },
  {
    name: "底部",
    numberdata: [
      { tape: "采购人：", colspan: "1" },
      { tape: "", colspan: "" },
      { tape: "送货人：", colspan: "1" },
      { tape: "", colspan: "" },
      { tape: "验证人：", colspan: "1" },
      { tape: "", colspan: "" },
    ],
  },
]); //定义数组，并初始化
const printhide = ref(false);
const tableQuery = reactive({
  timeRange: "",
  status: 1,
  beginTime: "",
  endTime: "",
});
const arradd = ref({
  nameimg: "",
  age: [],
});
const getDiviverList = () => {
  tableQuery.beginTime = tableQuery.timeRange[0];
  tableQuery.endTime = tableQuery.timeRange[1];
  reload();
};
const detailVisible = ref(false);
const code = reactive({
  code: "",
});

const exportcode = reactive({
  code: "",
});
const detailList = ref<divideDetailData[]>([]);
const toOp = (row: Data) => {
  detailVisible.value = true;
  code.code = row.code;
  exportcode.code = row.code;
  queryDivideOrderList(code).then((data) => {
    detailList.value = data;
  });
};
//打印
const showExport = ref(true);
const printlist = () => {
  printhide.value = true;

  printinformation(code).then((data) => {
    // console.log(data.list);
    //二维数组遍历
    let array = data.list;
    // array.forEach((element,index) => {
    //   // objname=element
    //   // console.log(element,"kkkkks");

    //     console.log(element,"9999");
    //     console.log(objname.abjss);

    //     objname.abjss.push(element[index]);

    //   });

    // console.log(arradd.value,"oooo");
    // console.log(arradd,'arradd');

    // objname.forEach(element => {
    //   console.log(element,"9999");

    // });
    for (const item of array) {
      // console.log(item);
      const objname = {
        abjss: [item],
      };
      console.log(objname);

      for (const prop in item) {
        console.log(item[prop]);
        
        // 在这里处理 item[prop]
      }
    }

    // for (var a in array) {
    //   console.log(array[a]);
    //   let objname = {
    //           abjss:[],
    //           }
    //         let arrnumber =   objname.abjss.push(array[a])
    //           console.log(objname);

    //         for (var b in array[a]) {
    //               // console.log(array[a][b]);

    //         }
    //     }
    // console.log(arrnumber);

    reload();
  });
};
//导出
const exportbtn = () => {
  const url = `/assist/export/exportDividerOrderList?code=${code.code}`;
  const myObj = {
    method: "get",
    url: url,
  };
  exportExcelMethod(myObj);
};
</script>
<style lang="scss" scoped>
@page {
  size: auto;
  margin: 5mm;
}

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: 100%;
  font-size: 0.28rem;
  tr {
    width: 100%;
    td {
      text-align: center;
    }
  }
}
</style>
